//import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import { Outlet, useNavigate } from "react-router-dom";
import "./App.css";
import { useEffect, useState } from "react";
import {IconHome,IconBook,IconEmail, IconTranslate} from '@arco-design/web-react/icon'

function App() {
  const [isActive,setActive]= useState('1');
  //const [greetMsg, setGreetMsg] = useState("");
  //const [name, setName] = useState("");

  //async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    //setGreetMsg(await invoke("greet", { name }));
  //}
  
  const close_window = () => {
     invoke("close_window")
  }
  const max_window = () => {
    invoke("max_window")
  }
  const min_window = () => {
    invoke("min_window")
  }
  const nav = useNavigate();
  useEffect(()=>{
    window.addEventListener("resize",()=>{
      location.reload()
    })
    nav("/home")
  },[])

  return (
    <>
      <div className="zheader">
        <div>ZTools</div>
        <div data-tauri-drag-region className="drag-bar"></div>
        <div className="zheader-bnt">
          <div style={{width:40,backgroundColor:'yellow'}} onClick={min_window}>-</div>
          <div style={{width:40,backgroundColor:'green'}} onClick={max_window}>O</div>
          <div style={{width:40,backgroundColor:'blue'}} onClick={close_window}>X</div>
        </div>
      </div>
      <div className="zbody">
        <div className="zsider">
          <div className="zsider-menu">
              <div className={isActive==='1'?"zsider-menu-content sider-active":"zsider-menu-content"}  
                onClick={()=> {setActive('1');nav('/home')}}><IconHome /></div>
              <div className={isActive==='2'?"zsider-menu-content sider-active":"zsider-menu-content"} 
                onClick={()=> {setActive('2');nav('/email')}}><IconEmail /></div>
              <div className={isActive==='3'?"zsider-menu-content sider-active":"zsider-menu-content"} 
                onClick={()=> {setActive('3');nav('/code')}}><IconBook /></div>
              <div className={isActive==='4'?"zsider-menu-content sider-active":"zsider-menu-content"} 
                onClick={()=> {setActive('4');nav('/translator')}}><IconTranslate /></div>
          </div>
        </div>
        <div className="zcontent">
          <Outlet />
        </div>
      </div>
    </>
  );
}

export default App;
